<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>浏览器管理</title>
<link href="../css/popForm.css" rel="stylesheet" type="text/css" />
<link href="../css/tab.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="../scripts/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
var url = '<%=basePath%>rest/apm/bizcode/browser_category';
function getApps(){
	$('#showtable').html('');
	$.getJSON(url, function(data) {
		biz=data.bizs;
		CreateTable(biz);
	});
}

//表格提交方法
function apptab(){
	var i=document.getElementById('funNum').value;
	if(i==1){
		addApp();
	}else if(i==2){
		updApp();
	}
}

//弹出添加表单
function addForm(){
	document.getElementById('funNum').value=1;
	showPopup('300px','370px');
}

function addApp() {
	var url1 = '<%=basePath%>rest/apm/bizcode';
	var jsonObj=jsonData();
	$.ajax({
		 url: url1,
		 type:'POST',
		 contentType:'application/json; charset=UTF-8',
		 data:jsonObj,
		 success: function(data) {
			 showOperResult(data);
		 }
		});
	$('#showtable').html('');
	getApps();
}

function updApp(){
	var url1 = '<%=basePath%>rest/apm/bizcode';
		var jsonObj = jsonData();
		$.ajax({
			url : url1,
			type : 'PUT',
			contentType : 'application/json; charset=UTF-8',
			data : jsonObj,
			success : function(data) {
				 showOperResult(data);
			}
		});
		$('#showtable').html('');
		getApps();
	}

	function delApp(id) {
		var delurl = '<%=basePath%>rest/apm?id='+id+'&typeid=7';
		$.ajax({
			url : delurl,
			type : 'DELETE',
			success : function(data) {
				 showOperResult(data);
			}
		});
		$('#showtable').html('');
		getApps();
	}

	//封装json数据，为了代码清晰 
	function jsonData() {
		var dsId = document.getElementById('dsId').value;
		var dsCode = document.getElementById('dsCode').value;
		var dsBusinessName = document.getElementById('dsBusinessName').value;
		var dsLabel = document.getElementById('dsLabel').value;
		var dsOrder = document.getElementById('dsOrder').value;
		var dsValue = document.getElementById('dsValue').value;
		var dsStatus = document.getElementById('dsStatus').value;

		var dsExtend1 = document.getElementById('dsExtend1').value;
		var dsExtend2 = document.getElementById('dsExtend2').value;
		var dsExtend3 = document.getElementById('dsExtend3').value;
		var dsExtend4 = document.getElementById('dsExtend4').value;
		var dsExtend5 = document.getElementById('dsExtend5').value;
		var dsDescription = document.getElementById('dsDescription').value;

		var jsonStr = "{";
		jsonStr += "\"dsId\":";
		jsonStr += "\"" + dsId + "\"";
		jsonStr += ",";
		jsonStr += "\"dsCode\":";
		jsonStr += "\"" + dsCode + "\"";
		jsonStr += ",";
		jsonStr += "\"dsBusinessName\":";
		jsonStr += "\"" + dsBusinessName + "\"";
		jsonStr += ",";
		jsonStr += "\"dsLabel\":";
		jsonStr += "\"" + dsLabel + "\"";
		jsonStr += ",";
		jsonStr += "\"dsOrder\":";
		jsonStr += "\"" + dsOrder + "\"";
		jsonStr += ",";
		jsonStr += "\"dsValue\":";
		jsonStr += "\"" + dsValue + "\"";
		jsonStr += ",";
		jsonStr += "\"dsStatus\":";
		jsonStr += "\"" + dsStatus + "\"";
		jsonStr += ",";
		jsonStr += "\"dsExtend1\":";
		jsonStr += "\"" + dsExtend1 + "\"";
		jsonStr += ",";
		jsonStr += "\"dsExtend2\":";
		jsonStr += "\"" + dsExtend2 + "\"";
		jsonStr += ",";
		jsonStr += "\"dsExtend3\":";
		jsonStr += "\"" + dsExtend3 + "\"";
		jsonStr += ",";
		jsonStr += "\"dsExtend4\":";
		jsonStr += "\"" + dsExtend4 + "\"";
		jsonStr += ",";
		jsonStr += "\"dsExtend5\":";
		jsonStr += "\"" + dsExtend5 + "\"";
		jsonStr += ",";
		jsonStr += "\"dsDescription\":";
		jsonStr += "\"" + dsDescription + "\"";
		jsonStr += "}";
		return jsonStr;//关键在于转换。 
	}

	$(document).ready(function() {
		getApps();
	});

	//创建表格
	function CreateTable(datalist) {
		var table = $("<table class=\"tab\">");
		table.appendTo($("#showtable"));
		var th = $("<th></th>");
		var td1 = $("<td>dsId</td>");
		var td2 = $("<td>dsCode</td>");
		var td3 = $("<td>dsBusinessName</td>");
		var td4 = $("<td>dsLabel</td>");
		var td5 = $("<td>dsOrder</td>");
		var td6 = $("<td>dsValue</td>");
		var td7 = $("<td>dsStatus</td>");
		var td8 = $("<td>dsExtend1</td>");
		var td9 = $("<td>dsExtend2</td>");
		var td10 = $("<td>dsExtend3</td>");
		var td11 = $("<td>dsExtend4</td>");
		var td12 = $("<td>dsExtend5</td>");
		var td13 = $("<td>dsDescription</td>");
		var td14 = $("<td>操作</td>");
		td1.appendTo(th);
		td2.appendTo(th);
		td3.appendTo(th);
		td4.appendTo(th);
		td5.appendTo(th);
		td6.appendTo(th);
		td7.appendTo(th);
		td8.appendTo(th);
		td9.appendTo(th);
		td10.appendTo(th);
		td11.appendTo(th);
		td12.appendTo(th);
		td13.appendTo(th);
		td14.appendTo(th);
		th.appendTo(table);
		for (var k = 0; k < datalist.length; k++) {
			var objStr=JSON.stringify(datalist[k]);
			var tr1 = $("<tr></tr>");
			var td1 = $("<td>" + datalist[k].dsId + "</td>");
			var td2 = $("<td>" + datalist[k].dsCode + "</td>");
			var td3 = $("<td width=50px>" + datalist[k].dsBusinessName
					+ "</td>");
			var td4 = $("<td>" + datalist[k].dsLabel + "</td>");
			var td5 = $("<td width=50px>" + datalist[k].dsOrder + "</td>");
			var td6 = $("<td>" + datalist[k].dsValue + "</td>");
			var td7 = $("<td>" + datalist[k].dsStatus + "</td>");
			var td8 = $("<td>" + datalist[k].dsExtend1 + "</td>");
			var td9 = $("<td>" + datalist[k].dsExtend2 + "</td>");
			var td10 = $("<td width=50px>" + datalist[k].dsExtend3 + "</td>");
			var td11 = $("<td>" + datalist[k].dsExtend4 + "</td>");
			var td12 = $("<td width=50px>" + datalist[k].dsExtend5 + "</td>");
			var td13 = $("<td>" + datalist[k].dsDescription + "</td>");
			var td14 = $("<td><a href='#' onclick=delApp('" + datalist[k].dsId
					+ "')>删除</a>&nbsp;||&nbsp;<a href='#' onclick=showUpdFormVal("+objStr+")>编辑</a></td>");
			td1.appendTo(tr1);
			td2.appendTo(tr1);
			td3.appendTo(tr1);
			td4.appendTo(tr1);
			td5.appendTo(tr1);
			td6.appendTo(tr1);
			td7.appendTo(tr1);
			td8.appendTo(tr1);
			td9.appendTo(tr1);
			td10.appendTo(tr1);
			td11.appendTo(tr1);
			td12.appendTo(tr1);
			td13.appendTo(tr1);
			td14.appendTo(tr1);
			tr1.appendTo(th);
		}
		$("#showtable").append("</table>");
	}
	
	function showOperResult(status){
		$('#operStaus').html('');
		if(status==1){
			$('#operStaus').html("<font size='3' color='red'>操作失败！</font>");
		}else if(status==2){
			$('#operStaus').html("<font size='3' color='red'>操作成功！</font>");
		}
	}
	
	//弹出更新表单
	function showUpdFormVal(obj){
		 document.getElementById('funNum').value=2;
		 
		 document.getElementById('dsId').value= obj.dsId;
		 document.getElementById('dsCode').value= obj.dsCode;
		 document.getElementById('dsBusinessName').value= obj.dsBusinessName;
		 document.getElementById('dsLabel').value= obj.dsLabel;
		 document.getElementById('dsOrder').value= obj.dsOrder;
		 document.getElementById('dsValue').value= obj.dsValue;
		 document.getElementById('dsStatus').value=  obj.dsStatus;
		 document.getElementById('dsExtend1').value= obj.dsExtend1;
		 document.getElementById('dsExtend2').value= obj.dsExtend2;
		 document.getElementById('dsExtend3').value= obj.dsExtend3;
		 document.getElementById('dsExtend4').value= obj.dsExtend4;
		 document.getElementById('dsExtend5').value= obj.dsExtend5;
		 document.getElementById('dsDescription').value= obj.dsDescription;
		 
		 showPopup('300px','370px');
	}
</script>

<body>
	<input type="button" onclick="getApps();" value="查询浏览器" />
	<input type="button" onclick="addForm();" value="添加浏览器" />
	<br />
	<!--操作结果提示-->
	<div id="operStaus" style="width:150px;height:25px;"></div>
	<input type="hidden" id="funNum" name="funNum" />
	<div id="popDiv">
		<div id="popTitle">
			<!-- 标题div -->
			<span class="title_left">修改操作</span> <span class="title_right">
			<a href="#" onclick="hidePopup();">关闭</a> </span>
		</div>
		<!-- 表单div -->
		<div id="popForm">
		<form id="form1" name="form1">
			<table>
				<tr id="sysid" style="display: none;">
					<td>dsId</td>
					<td><input type="text" id="dsId" name="dsId" /></td>
				</tr>
				<tr>
					<td>dsCode</td>
					<td><input type="text" id="dsCode" name="dsCode" /></td>
				</tr>
				<tr>
					<td>dsBusinessName</td>
					<td><input type="text" id="dsBusinessName"
						name="dsBusinessName" value="browser_category" disabled="disabled" /></td>
				</tr>
				<tr>
					<td>dsLabel</td>
					<td><input type="text" id="dsLabel" name="dsLabel" /></td>
				</tr>
				<tr>
					<td>dsOrder</td>
					<td><input type="text" id="dsOrder" name="dsOrder" /></td>
				</tr>
				<tr>
					<td>dsValue</td>
					<td><input type="text" id="dsValue" name="dsValue" /></td>
				</tr>
				<tr>
					<td>dsStatus</td>
					<td><input type="text" id="dsStatus" name="dsStatus" /></td>
				</tr>
				<tr>
					<td>dsExtend1</td>
					<td><input type="text" id="dsExtend1" name="dsExtend1" /></td>
				</tr>
				<tr>
					<td>dsExtend2</td>
					<td><input type="text" id="dsExtend2" name="dsExtend2" /></td>
				</tr>
				<tr>
					<td>dsExtend3</td>
					<td><input type="text" id="dsExtend3" name="dsExtend3" /></td>
				</tr>
				<tr>
					<td>dsExtend4</td>
					<td><input type="text" id="dsExtend4" name="dsExtend4" /></td>
				</tr>
				<tr>
					<td>dsExtend5</td>
					<td><input type="text" id="dsExtend5" name="dsExtend5" /></td>
				</tr>
				<tr>
					<td>dsDescription</td>
					<td><input type="text" id="dsDescription" name="dsDescription" /></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="button" value="提交" onclick="apptab();" />
						&nbsp;<input type="reset" value="重置" />
						&nbsp;<input type="button" value="关闭" onclick="hidePopup()" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	</div>
	<hr>
	<div id="showtable"></div>
</body>
<script type="text/javascript" src="../scripts/mouseMoveForm.js"></script>
</html>